<template>
  <div id="app">
    <audio src="song/gamerover.mp3" id="gamerOver"></audio>
    <!--<audio src="song/bgsong.mp3" autoplay="autoplay" loop="loop" id="bgSong"></audio>-->
    <audio src="song/enemyBz.mp3" id="shoot"></audio>
    <audio src="song/bossBz.mp3" id="bossBz"></audio>
    <audio src="song/ufo1.wav" id="ufoGet"></audio>
    <audio src="song/ufo2.mp3" id="ufoLev"></audio>
    <div id="mark" v-if="loading">
        <div id="load">{{load_percent}}%</div>
    </div>
   
    <div id="rank" :class="{ hidden:!show_rank}">
        
        <div class="title">排行榜</div>
        <div class="close"  @click="close_rank">X</div>
        <div class="rankbox">
            <div class="rank-item" v-for="(item,index) in rank" :key="item.id">
                <div class="pai">{{index+1}}</div>
                <div class="info">
                    <div class="in1">
                        <div class="nickname">{{item.nickname}}</div>
                        <div class="score">分数：{{item.score}}</div>
                        <div class="level">等级：{{item.level}}</div>
                    </div>
                 
                    <div class="time">{{item.time}}</div>
                </div>
            </div>
            
        </div>
    </div>
    <center>
        <canvas id="canvas"></canvas>
    </center>

    <!-- <img src="/img/LOGO.png"  id="imgss" /> -->
</div>

</template>

<script>

import { changeScence } from '../js/scence';
import { imglist } from "../js/resoures"
import { loadImg } from "../js/loader"
export default {
    data: ()=> {
        return { 
            show_rank: false,
            rank: [],
            nickname: '',
            pwd: '',
            loading: true,
            load_percent:0
        }
    },
    mounted(){
        console.log("mount")
        window.Sounds = {
            gamerOver: document.getElementById("gamerOver"),
            shoot: document.getElementById("shoot"),
            bossBz: document.getElementById("bossBz"),
            ufoGet: document.getElementById("ufoGet"),
            ufoLev: document.getElementById("ufoLev"),
        }
        this.loadImg()
    },
    methods: {

        init(){
            var canvas = document.getElementById("canvas");
            window.canvas_width = document.body.clientWidth;
            window.canvas_height = document.body.clientHeight;
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            window.ctx = canvas.getContext("2d");

            window.globalData = {
                score:0,
                hero:{},
                level:0
            }
 
            this.loading = false
            window.changeScence = changeScence
            changeScence('sc1')

        },
        loadImg() {
            var preLoadNum = 1
            var preLoadImgList = []
          
            for (var i = 0; i < imglist.length; i++) {
                preLoadImgList[i] = new Image();
                preLoadImgList[i].src = imglist[i];
                preLoadImgList[i].onload = ()=> {
                    preLoadNum++;
                    this.load_percent = Math.floor(preLoadNum / imglist.length * 100);
                    if (preLoadNum >= imglist.length) {
                        this.init()
                        return
                    }

                }
            }    
        },
        close_rank() {
            this.show_rank = false;
        }
    },
}
</script>